<template>
	<view class="mine-wrap page-bg content-20">
		<!-- 已经登录 -->
		<block v-if="isLogin">
		<view class="page-header">
			<image class="user-avatar" :src="userInfo.avatar | avatar" mode=""></image>
			<view class="user-info">
				<view class="user-name">{{userInfo.nickName}} <text class="user-level" v-if="userInfo.isRegimental">团长</text><text class="user-level" v-else>普通会员</text></view>
				<view class="user-btn" style="display: none;" @click="link('/pages/mine/edit')">查看和编辑资料</view>
				<view class="user-btn" v-if="userInfo.userPhone">{{userInfo.userPhone | phonePartOf}}</view>
				<view class="user-btn" v-else @click="$link('/pages/login/login')">绑定手机号</view>
			</view>
			<image class="user-code" @click="link('/pages/share/share')" src="../../static/common/icon_20.png"></image>
		</view>
		
		<view class="mine-group">
			<view class="tp-item tp-item__active" @click="link('/pages/mine/profit')">
				<view class="tp-item__desc desc link">余额</view>
				<view class="tp-item__num yuan">{{userInfo.account | formatMoney}}</view>
			</view>
			<view class="tp-item" @click="link('/pages/mine/bean')">
				<view class="tp-item__desc desc link">{{common.bean}}</view>
				<view class="tp-item__num">{{userInfo.integral}}</view>
			</view>
			<view class="tp-item">
				<view class="tp-item__desc desc link" @click="link('/pages/mine/coupon')">优惠券</view>
				<view class="tp-item__num">{{userInfo.couponNum || 0}}</view>
			</view>
			<view class="tp-item" @click="link('/pages/mine/team')">
				<view class="tp-item__desc desc link">团队</view>
				<view class="tp-item__num">{{userInfo.teamNum}}</view>
			</view>
		</view>
		
		<view class="mine-group">
			<view class="header-line" >
				<view class="group-title">我的订单</view>
				<view class="desc link" @click="link('/pages/mine/order?status=all')">查看全部</view>
			</view>
			<view class="tp-item" @click="link('/pages/mine/order?status=0')">
				<image class="tp-item__icon" src="../../static/common/icon_15.png"></image>
				<view class="tp-item__title ">待付款</view>
				<view class="radio-num">0</view>
			</view>
			<view class="tp-item" @click="link('/pages/mine/order?status=2')">
				<image class="tp-item__icon" src="../../static/common/icon_16.png"></image>
				<view class="tp-item__title ">待发货</view>
			</view>
			<view class="tp-item" @click="link('/pages/mine/order?status=3')">
				<image class="tp-item__icon" src="../../static/common/icon_17.png"></image>
				<view class="tp-item__title ">待收货</view>
			</view>
			<view class="tp-item" @click="link('/pages/mine/order?status=5')">
				<image class="tp-item__icon" src="../../static/common/icon_19.png"></image>
				<view class="tp-item__title ">已完成</view>
			</view>
		</view>
		
		<view class="line-info-wrap">
			<view class="line-info" @click="link('/pages/mine/orderTeam')">
				<view class="line-info__title">拼团订单</view>
				<view class="line-info__con link"></view>
			</view>
			<view class="line-info" @click="link('/pages/mine/myTeam')">
				<view class="line-info__title">我的团</view>
				<view class="line-info__con link"></view>
			</view>
		</view>
		
		<view class="shop-in" @click="link('/pages/shop/shopInPay')">
			<image class="bg" src="../../static/item_23.png" mode=""></image>
			<view class="shop-in__info">
				<view class="title">限时3000元轻松开店</view>
				<view class="desc">开通店铺专享优质尊贵特权！</view>
			</view>
			<view class="btn">立即开通</view>
		</view>
		
		<view class="line-info-wrap">
			<view class="line-info" @click="startShop">
				<view class="line-info__title">我的店铺</view>
				<view class="line-info__con link">0</view>
			</view>
		</view>
		
		<view class="interval"></view>
		
		<view class="mine-group bank-list">
			<view class="tp-item" @click="link('/pages/mine/bank')">
				<image class="tp-item__icon" src="../../static/common/icon_22.png"></image>
				<view class="tp-item__title ">银行卡</view>
			</view>
			<view class="tp-item" @click="link('/pages/mine/address')">
				<image class="tp-item__icon" src="../../static/common/icon_23.png"></image>
				<view class="tp-item__title ">收货地址</view>
			</view>
			<view class="tp-item" @click="link('/pages/mine/help')">
				<image class="tp-item__icon" src="../../static/common/icon_24.png"></image>
				<view class="tp-item__title ">帮助中心</view>
			</view>
			<view class="tp-item" @click="link('/pages/mine/aboutus')">
				<image class="tp-item__icon" src="../../static/common/icon_25.png"></image>
				<view class="tp-item__title ">关于我们</view>
			</view>
		</view>
		
		<view class="line-info-wrap">
			<view class="line-info" @click="makePhone">
				<view class="line-info__title">客服热线</view>
				<view class="line-info__con link">{{common.servicePhone}}</view>
			</view>
			<!-- 已实名就隐藏该接口 -->
			<view class="line-info" @click="auth('/pages/mine/auth')">
				<view class="line-info__title">实名认证</view>
				<view v-if="userInfo.isAuth" class="line-info__con link">已实名</view>
				<view v-else class="line-info__con link" @click="auth('/pages/mine/auth')">立即实名</view>
			</view>
			<view class="line-info" @click="link('/pages/mine/setting')">
				<view class="line-info__title">设置</view>
				<view class="line-info__con link"></view>
			</view>
		</view>
		
		<view class="btn-set" @click="logout">清除缓存</view>
</block>

	<!-- 没有登录 -->
		<block v-if="!isLogin">
			<view class="page-header">
				<image class="user-avatar" src="../../static/common/avatar.png" mode=""></image>
				<view class="user-info" @click="link('/pages/login/login')">
					<view class="go-login">点击登录</view>
					<view class="user-btn">登陆一下，发现更多精彩！</view>
				</view>
				<image class="user-code" src="../../static/common/icon_20.png"></image>
			</view>

			<view class="mine-group">
				<view class="tp-item">
					<view class="tp-item__desc desc link">余额</view>
					<view class="tp-item__num yuan">0.00</view>
				</view>
				<view class="tp-item" >
					<view class="tp-item__desc desc link">{{common.bean}}</view>
					<view class="tp-item__num yuan">0</view>
				</view>
				<view class="tp-item">
					<view class="tp-item__desc desc link" >优惠券</view>
					<view class="tp-item__num yuan">0</view>
				</view>
				<view class="tp-item">
					<view class="tp-item__desc desc link">团队</view>
					<view class="tp-item__num yuan">0</view>
				</view>
			</view>

			<view class="mine-group">
				<view class="header-line" >
					<view class="group-title">我的订单</view>
					<view class="desc link">查看全部</view>
				</view>
				<view class="tp-item">
					<image class="tp-item__icon" src="../../static/common/icon_15.png"></image>
					<view class="tp-item__title ">待付款</view>
					<view class="radio-num">0</view>
				</view>
				<view class="tp-item">
					<image class="tp-item__icon" src="../../static/common/icon_16.png"></image>
					<view class="tp-item__title ">待发货</view>
				</view>
				<view class="tp-item">
					<image class="tp-item__icon" src="../../static/common/icon_17.png"></image>
					<view class="tp-item__title ">待收货</view>
				</view>
				<view class="tp-item">
					<image class="tp-item__icon" src="../../static/common/icon_19.png"></image>
					<view class="tp-item__title ">已完成</view>
				</view>
			</view>

			<view class="line-info-wrap">
				<view class="line-info" >
					<view class="line-info__title">拼团抽奖</view>
					<view class="line-info__con link">0</view>
				</view>
			</view>
			
			<view class="shop-in">
				<image class="bg" src="../../static/item_23.png" mode=""></image>
				<view class="shop-in__info">
					<view class="title">限时3000元轻松开店</view>
					<view class="desc">开通店铺专享优质尊贵特权！</view>
				</view>
				<view class="btn">立即开通</view>
			</view>
			
			<view class="line-info-wrap">
				<view class="line-info">
					<view class="line-info__title">我的店铺</view>
					<view class="line-info__con link">0</view>
				</view>
			</view>
			
			<view class="interval"></view>

			<view class="mine-group bank-list">
				<view class="tp-item" >
					<image class="tp-item__icon" src="../../static/common/icon_22.png"></image>
					<view class="tp-item__title ">银行卡</view>
				</view>
				<view class="tp-item" >
					<image class="tp-item__icon" src="../../static/common/icon_23.png"></image>
					<view class="tp-item__title ">收货地址</view>
				</view>
				<view class="tp-item" >
					<image class="tp-item__icon" src="../../static/common/icon_24.png"></image>
					<view class="tp-item__title ">帮助中心</view>
				</view>
				<view class="tp-item">
					<image class="tp-item__icon" src="../../static/common/icon_25.png"></image>
					<view class="tp-item__title ">关于我们</view>
				</view>
			</view>

			<view class="line-info-wrap">
				<view class="line-info" @click="makePhone">
					<view class="line-info__title">客服热线</view>
					<view class="line-info__con link">{{common.servicePhone}}</view>
				</view>
				<!-- 已实名就隐藏该接口 -->
				<view class="line-info">
					<view class="line-info__title">实名认证</view>
				
					<view  class="line-info__con link">去实名</view>
				</view>
				<view class="line-info">
					<view class="line-info__title">设置</view>
					<view class="line-info__con link"></view>
				</view>
			</view>
		</block>
		<footerInfo></footerInfo>
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import footerInfo from '../../components/footerInfo.vue'
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return {
				common,
				isLogin: false,
				userInfo: {}
			}
		},
		
		onLoad() {		
			this.isLogin = this.$isLogin()
			this.userInfo = common.getUserInfo() 
		},
		
		onShow() {
			// 更新用户缓存信息
			if(this.isLogin) {
				this.getUserInfo()
			}
		},
		
		methods: {
			link(url) {
				if(url==='/pages/login/login') {
					this.$login.uniLogin()
				}else{
					this.$link(url)
				}
			},
			
			makePhone() {
				common.makePhoneCall()
			},
			
			auth(url) {
				if(!this.$isBindPhone()) {
					this.$link('/pages/login/login')
				}else{
					this.$link(url)
				}
			},
			
			// 开通店铺
			startShop() {
				if(!this.userInfo.isAuth) {
					this.$showModal('', '请先开通团长(店长)才能申请开通店铺哦~', () => {
						this.$link('/pages/shop/shopInPay')
					})
					uni.showModal({
						title:'温馨提示',
						content:'您还没有实名, 请先进行实名认证~',
						confirmText:'立即实名',
						confirmColor:'#CFA972'
					}).then(res => {
						if(res[1].confirm) {
							this.$link('/pages/mine/auth')
						}
					})
					return
				}
				// 判断有没有店铺
				if(this.userInfo.isHaveShop) {
					this.$link('/pages/shop/shopIndexList?id='+this.userInfo.shopId)
				}else{
					// 不是团长，开通团长
					if(!this.userInfo.isRegimental) {
						this.$showModal('', '请先开通团长(店长)才能申请开通店铺哦~', () => {
							this.$link('/pages/shop/shopInPay')
						})
					}else{
						// 是团长，申请店铺
						this.$link('/pages/shop/shopIn')
					}
				}
			},
			
			getUserInfo () {
				api.getUserInfoAsync({ }, (res) => {
					let token = this.userInfo.token
					res.token = token
					this.userInfo = res
					common.setUserInfo(res)
				})
			},
			
			logout() {
				uni.removeStorageSync('user')		
				uni.removeStorageSync('code')		
				uni.removeStorageSync('shopDetailId')		
				uni.removeStorageSync('shopTeamDetailId')		
				this.$showToast('缓存清除成功~')
				setTimeout(() => {
					this.$link('/pages/index/index')
				}, 2000)
			}
		},
		
		components: {
			footerInfo
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.btn-set{
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: @theme-color;
		background-color: @f;
		.br;
		margin-top: 20rpx;
	}
	.mine-wrap {
		background: url() no-repeat left top, #ededed;
		background-size: 100% auto;
		padding-top: 0;
	}

	.page-header {
		height: 190rpx;
		width: 100%;
		.flex-base;

		.user-avatar {
			width: 115rpx;
			height: 115rpx;
			border-radius: 100%;
			border: 1px solid @f;
		}

		.user-info {
			color: @f;
			flex-grow: 2;
			padding: 0 20rpx;
		}

		.user-name {
			font-weight: 34rpx;
			.fw;
		}

		.go-login {
			background-color: transparent;
			height: 46rpx;
			line-height: 46rpx;
			text-align: center;
			border-radius: 46rpx;
			border: 1px solid @f;
			padding: 0 20rpx;
			.f24;
			display: inline-block;
		}

		.user-level {
			background-color: @f;
			height: 30rpx;
			line-height: 30rpx;
			border-radius: 30rpx;
			color: @font-orange-color;
			padding: 0 10rpx;
			margin-left: 20rpx;
			.f22;
		}

		.user-btn {
			.f24;
			margin-top: 20rpx;
		}

		.user-code {
			width: 45rpx;
			height: 45rpx;
			margin-right: 30rpx;
		}
	}
	
	.mine-group {
		background-color: @f;
		.br;
		.flex-base;
		flex-wrap: wrap;
		padding: 30rpx 0;
		margin-bottom: 20rpx;

		.tp-item {
			width: 25%;
			.flex-base;
			text-align: center;
			flex-direction: column;
			justify-content: center;
			position: relative;

			.link::after {
				height: 16rpx;
				background-size: contain;
			}
		}

		.tp-item__num {
			.fw;
			.f30;
			margin-top: 10rpx;
		}

		.tp-item__active {
			.tp-item__num {
				color: @font-orange-color;
			}
		}

		.header-line {
			.flex-base;
			width: 100%;
			padding: 0 30rpx;
			margin-bottom: 20rpx;
		}

		.group-title {
			.f32;
		}

		.tp-item__icon {
			width: 46rpx;
			height: 34rpx;
			position: relative;
		}

		.tp-item__title {
			.f24;
			margin-top: 10rpx;
		}

		.tp-item:last-child {
			.tp-item__icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.radio-num {
			position: absolute;
			border-radius: 100%;
			font-size: 20rpx;
			.flex-base;
			justify-content: center;
			background-color: @theme-color;
			color: @f;
			right: 0;
			top: 0;
			display: none;
		}
	}
	.bank-list{
		.tp-item:nth-of-type(3){
			.tp-item__icon {
				width: 40rpx;
				height: 40rpx;
			}
		}
		.tp-item:nth-of-type(2){
			.tp-item__icon {
				width: 46rpx;
				height: 46rpx;
			}
		}
	}

	.title {
		.f32;
	}

	.line-info-wrap {
		background-color: @f;
		.br;
		padding: 0 30rpx;
		box-sizing: border-box;

		.line-info {
			height: 100rpx;
			.flex-base;
			.bb;
		}

		.line-info:last-child {
			border-bottom: none;
		}

		.line-info__title {
			.f32;
		}

		.line-info__con {
			.f24;
			color: @font-dark-color;
		}
	}

	.shop-in {
		margin: 20rpx 0;
		position: relative;
		.content-30;
		.br;
		.flex-base;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}

		.shop-in__info {
			position: relative;

			.flex-base;
			flex-direction: column;

			.title {
				.fw;
				.f30;
				width: 100%;
				margin-bottom: 10rpx;
			}

			.desc {
				.f22;
				color: #775525;
				width: 100%;
			}
		}

		.btn {
			position: relative;
			color: @font-orange-color;
			background-color: @font-base-color;
			.fw;
			height: 50rpx;
			line-height: 50rpx;
			.f24;
		}
	}
</style>
